<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-28 09:04:49
 * @LastEditors: ZachGmy
 * @LastEditTime: 2023-01-01 10:47:31
-->
<template>
  <div>
    <!-- 顶部背景展示区域 -->
    <div class="bgArea">医疗救治定点医院和发热门诊一览</div>
    <!-- 搜索区域 -->
    <div class="searchArea">
      <!-- 搜索输入框 -->
      <el-input
        style="width: 30%"
        placeholder="请输入内容"
        v-model="inputStr"
        clearable
      >
      </el-input>
      <!-- 搜索按钮 -->
      <el-button type="primary" @click="getHosMessage">搜索</el-button>
      <el-dropdown @command="handleCommand">
        <el-button type="primary">
          {{ selectCity }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="全部">全部</el-dropdown-item>
          <el-dropdown-item
            v-for="(item, index) in cityList"
            :key="index"
            :command="item.name"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 医院信息展示区域 -->
    <div
      class="hosArea"
      @click="toMapPage(item)"
      v-for="item in hosData"
      :key="item.id"
    >
      <div class="hosMessage">
        <div class="hosName">{{ item.name }}</div>
        <div class="hosAddress">
          {{ item.province + item.city + item.area + item.address }}
        </div>

        <div class="hosDesc">{{ item.flags }}</div>
      </div>
      <div class="distance">
        <div class="icon">
          <img width="30px" src="../assets/dingwei.png" alt="" />
        </div>
        <div class="dis">{{ item.distance }}km</div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入get方法
import { get } from "../utils/request.js";
import china_covid from "../assets/china_covid.json";
export default {
  data() {
    return {
      china_covid,
      inputStr: "",
      hosData: [],
      cityList: [],
      selectCity: "选择城市",
      hosProvince: "湖南省",
    };
  },
  created() {
    this.getHosMessage();
    this.getHosDistance();
    this.loadCity();
  },
  methods: {
    async handleCommand(command) {
      if (command == "全部") {
        this.selectCity = command;
        this.getHosMessage();
      } else {

        if (command.split("").reverse().join("").substring(0, 1) == "市") {
          this.selectCity = command;
        } else {
          this.selectCity = command + "市";
        }

        let params = {
          page: 1,
          pageSize: 100,
          name: this.inputStr,
        };
        let res = await get("/hospital/pageQuery", params);
        this.hosData = res.data.list.filter((item) => {
          return (
            item.province == this.hosProvince && item.city == this.selectCity
          );
        });
      }
    },
    loadCity() {
      let res = this.china_covid.list.filter((item) => {
        return item.name == this.hosProvince.substring(0, 2);
      });
      this.cityList = res[0].city.filter((item) => {
        return item.name != "境外输入";
      });
    },
    async getHosMessage() {
      let params = {
        page: 1,
        pageSize: 100,
        name: this.inputStr,
      };
      let res = await get("/hospital/pageQuery", params);
      this.hosData = res.data.list.filter((item) => {
        return item.province == this.hosProvince;
      });
    },
    getHosDistance() {
      let _this = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,
          timeout: 10000,
          offset: [10, 20],
          zoomToAccuracy: true,
          position: "RB",
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });

        function onComplete(data) {
          _this.hosData.map((item) => {
            let p1 = [data.position.lng, data.position.lat];
            let p2 = [item.longitude, item.latitude];
            let dis = AMap.GeometryUtil.distance(p1, p2);

            _this.$set(item, "distance", (dis / 1000).toFixed(2));
          });
        }

        function onError(data) {
          // 定位出错
        }
      });
    },
    toMapPage(item) {
      this.$router.push({
        path: "/hospital/map",
        query: item,
      });
    },
  },
};
</script>

<style scoped>
/* 顶部背景区域的样式 */
.bgArea {
  /* 背景图片 */
  background-image: url("../assets/bg1.png");
  width: 100%;
  line-height: 140px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  padding-left: 30px;
  border-radius: 10px;
}
/* 搜索区域的样式 */
.searchArea {
  margin: 10px 0;
}
/* 设置医院区域的样式 */
.hosArea {
  display: flex;
  height: 53px;
  margin-bottom: 15px;
}
.hosArea:hover {
  border-bottom: 1px solid #f8f8f8;
  border: 2px solid #999999;
  border-radius: 10px;
  height: auto;
}
/* 设置医院列表的样式 */
.hosArea .hosMessage {
  flex: 1;
}

/* 设置医院名称的样式 */
.hosMessage .hosName {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
}
/* 设置医院简介的样式 */
.hosMessage .hosDesc {
  padding: 4px;
  background-color: cadetblue;

  color: white;
  border-radius: 5px 0px 0px 5px;
  margin: 0px;
  display: none;
}
.hosArea:hover .hosDesc {
  display: block;
  height: auto;
  display: block;
}

/* 设置医院地址的样式 */
.hosMessage .hosAddress {
  color: #999999;
}
/* 设置定位区域的样式 */
.distance {
  text-align: center;
  margin-left: 10px;
}
</style>
